<template>
  <div class="topServiceLogShow">
    <div class="titleservicelog">
      <div class="diyiservicelog"></div>
      <font>服务详情</font>
    </div>
    <div class="dierservicelog">
      <hr color="#F7FAFD" />
    </div>
    <div class="disanwangcheng1servicelog"><font>居民信息</font></div>
    <div class="disiwangcheng">
      <table border="0" height="200px" width="100%">
        <tr>
          <td align="right" width="54px"><font class="font1"> 姓名</font></td>
          <td width="10px"></td>
          <td width="200px">
            <a href="#" class="xingming">{{list.user_name}}</a>
          </td>
          <td width="54px"><font class="font1">身份证号</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.user_cardId}}</td>
          <td align="right" width="54px"><font class="font1">性别</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.user_sex ==1?"男":"女"}}</td>
          <td align="right" width="54px"><font class="font1">年龄</font></td>
          <td width="10px"></td>
          <td>{{list.user_age}}</td>
        </tr>
        <tr>
          <td><font class="font1">联系电话</font></td>
          <td width="10px"></td>
          <td>{{list.user_phone}}</td>
          <td align="right"><font class="font1">现居地</font></td>
          <td width="10px"></td>
          <td colspan="3">{{list.user_area}}</td>
          <td width="10px"></td>
          <td><font class="font1">居民标签</font></td>
          <td width="10px"></td>
          <td><el-tag>高血压</el-tag><el-tag type="success">冠心病</el-tag></td>
        </tr>
        <tr>
          <td valign="top" align="right"><font class="font1">家庭</font></td>
          <td width="10px"></td>
          <td height="86px" colspan="10">
            <div id="jiaw">
              <div id="jia1-1w">
                <img
                  class="servicelogimg"
                  width="50px"
                  height="50px"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                  alt=""
                />
              </div>
              <div id="jia1-2w">
                <table id="table1servicelog">
                  <tr>
                    <td><font id="xingming">李青</font></td>
                    <td><font class="font1">58sui</font></td>
                  </tr>
                  <tr>
                    <td><font class="font1">关系:</font></td>
                    <td><font class="font1">父母</font></td>
                  </tr>
                </table>
              </div>
            </div>
            <div id="jia1w">
              <div id="jia1-1w">
                <img
                class="servicelogimg"
                  width="50px"
                  height="50px"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                  alt=""
                />
              </div>
              <div id="jia1-2w">
                <table id="table1servicelog">
                  <tr>
                    <td><font id="xingming">王林</font></td>
                    <td><font class="font1">28sui</font></td>
                  </tr>
                  <tr>
                    <td><font class="font1">关系:</font></td>
                    <td><font class="font1">夫妻</font></td>
                  </tr>
                </table>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="diersddsservicelog">
      <hr color="#F7FAFD" />
    </div>
    <div class="disanwangcheng222"><font>服务信息</font></div>
    <div class="diwuwangcheng">
      <table border="0" height="220px" width="100%">
        <tr>
          <td align="right" width="54px"><font class="font1"> 服务编号</font></td>
          <td width="10px"></td>
          <td width="200px"></td>
          <td width="54px"><font class="font1">服务状态</font></td>
          <td width="10px"></td>
          <td width="330px">
              <font color="#6C76F6" v-if="list.serve_state==4">已完成</font>
              <font color="#99A5C2" v-if="list.serve_state==5">已取消</font>
          </td>
          <td align="right" width="54px"><font class="font1">服务机构</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.sign_organization ==1?"罗西社区服务中心":(list.serve_state ==2?"天明社区服务中心":"民进社区服务中心")}}</td>
          <td align="right" width="54px"><font class="font1">服务团队</font></td>
          <td width="10px"></td>
          <td>{{list.sign_team ==1?"A团队":(list.sign_team ==2?"B团队":"C团队")}}</td>
        </tr>
        <tr>
          <td align="right" width="54px"><font class="font1"> 服务医生</font></td>
          <td width="10px"></td>
          <td width="200px">{{list.sign_doctor ==1?"田浩华":(list.sign_doctor ==2?"张峰鸣":(list.sign_doctor ==3?"王帅龙":(list.sign_doctor ==4?"杨林楠":"万辉")))}}</td>
          <td width="54px"><font class="font1">服务包</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.serveName}}</td>
          <td align="right" width="54px"><font class="font1">服务项目</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.projectName}}</td>
          <td align="right" width="54px"><font class="font1">服务来源</font></td>
          <td width="10px"></td>
          <td>居民申请</td>
        </tr>
        <tr>
          <td align="right" width="54px"><font class="font1">服务地点</font></td>
          <td width="10px"></td>
          <td width="200px">机构门诊</td>
          <td width="54px"><font class="font1">预约时间</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.contract_date}}</td>
          <td align="right" width="54px"><font class="font1">提交时间</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.end_time}}</td>
          <td align="right" width="54px"><font class="font1">审核时间</font></td>
          <td width="10px"></td>
          <td>{{list.contract_date}}</td>
        </tr>
        <tr>
          <td align="right" width="54px"><font class="font1">审核人</font></td>
          <td width="10px"></td>
          <td width="200px">王帅龙</td>
          <td width="54px"><font class="font1">完成时间</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.end_time}}</td>
          <td align="right" width="54px"><font class="font1">服务备注</font></td>
          <td width="10px"></td>
          <td width="150px">上次的药已经吃完了</td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="diliusdds">
      <hr color="#F7FAFD" v-if="list.serve_state==4"/>
    </div>
    <div class="disanwangcheng76554" v-if="list.serve_state==4"><font>健康随访信息</font></div>
    <div class="diqiwancheng" v-if="list.serve_state==4">
        <table border="0" height="150px" width="100%">
        <tr>
          <td align="right" width="54px"><font class="font1">血压</font></td>
          <td width="10px"></td>
          <td width="200px">{{list.user_xieya}}</td>
          <td width="54px"><font class="font1">空腹血糖</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.user_xetang}}</td>
          <td align="right" width="54px"><font class="font1">心率</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.user_xinlu}}</td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td></td>
        </tr>
        <tr>
          <td align="right" width="54px"><font class="font1">病情描述</font></td>
          <td width="10px"></td>
          <td width="200px">{{list.user_miaoshu}}</td>
          <td width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td width="330px"></td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td width="150px"></td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td></td>
        </tr>
        <tr>
          <td align="right" width="54px"><font class="font1">健康指导</font></td>
          <td width="10px"></td>
          <td width="200px">{{list.user_zhidao}}</td>
          <td width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td width="330px"></td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td width="150px"></td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td></td>
        </tr>
        </table>
    </div>
    <div class="dibawangcheng"><hr color="#F7FAFD" /></div>
    <div class="dijiuwangcheng">
      <router-link to="/serve02">
        <el-button plain >返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080/";
export default {
  data () {
    return {
      list:[]  
    }
  },
  methods: {
    quertList(){
      axios({
        url: "serve/getServeById2",
        method: "GET",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.list = res.data; //把值传到list里面
        console.log(res.data);
      });
    }
  },
  created () {
    this.quertList(),
    document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
  }
};
</script>

<style>
#table1servicelog{
  float: left;
  margin-top: -65px;
  margin-left: 110px;
  width: 80px;
}
.servicelogimg{
  border-radius: 100px;
}
.disanwangcheng76554{
  float: left;
  margin-top: 2%;
  margin-left: 2%;
}
.disanwangcheng222{
  float: left;
  margin-top: 2%;
  margin-left: 2%;
}
.dijiuwangcheng{
    width: 96%;
    height: 70px;
    float: left;
    /* background-color: red; */
    margin-left: 2%;
    margin-top: 1.5%;
}
.dibawangcheng{
    width: 96%;
    /* height: 100px; */
    float: left;
    /* background-color: red; */
    margin-left: 2%;
    margin-top: 1.5%;
}
.diqiwancheng{
    width: 96%;
    /* height: 100px; */
    float: left;
    /* background-color: red; */
    margin-left: 2%;
    margin-top: 1.5%;
    font-size: 13px;
}
.diliusdds{
    width: 96%;
    /* height: 100px; */
    float: left;
    /* background-color: red; */
    margin-top: 10.5%;
    margin-left: 2%;
}
.diwuwangcheng {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 1%;
  height: 100px;
  font-size: 13px;
  /* background-color: red; */
}
.diersddsservicelog {
  width: 96%;
  float: left;
  margin-left: 2%;
  margin-top: 4.5%;
}
#jia1-2w {
  float: left;
  width: 100px;
  height: 84px;
  /* background-color: #2984f8; */
}
#jia1-1w {
  float: left;
  width: 100px;
  height: 84px;
  line-height: 120px;
  text-align: center;
  /* background-color: #2984f8; */
}
#jia1w {
  margin-left: 2%;
  float: left;
  width: 200px;
  height: 84px;
  border: 1px solid rgb(223, 217, 217);
  border-radius: 5px;
  /* background-color: brown;    */
}
#jiaw:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jia1w:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jiaw {
  float: left;
  width: 200px;
  height: 84px;
  border-radius: 5px;

  border: 1px solid rgb(223, 217, 217);
  /* background-color: brown;    */
}
.disiwangcheng {
  float: left;
  width: 96%;
  margin-top: 2%;
  margin-left: 2%;
  font-size: 13px;
}
.disanwangcheng1servicelog {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 2%;
  /* margin-top: -10%; */
  /* height: 100px; */
  /* background-color: red; */
  font-size: 16px;
}
.dierservicelog {
  float: left;
  height: 10px;
  width: 96%;
  margin-left: 2%;
  margin-top: 1%;
  /* background-color: blue; */
}
.diyiservicelog {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.titleservicelog {
  width: 100%;
  height: 40px;
  font-size: 18px;
  /* margin-top: 10%; */
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
.topServiceLogShow {
  width: 1150px;
  height: 1010px;
  background: white;
  margin: 20px auto;
}
</style>